<%@page pageEncoding="utf-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        欢迎界面
    </title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/bootstrap/css/bootstrap.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/bootstrap/js/bootstrap.min.js" media="all">
    <script src="${pageContext.request.contextPath}/lib/layui/layui.js" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
</head>
<body>
<style type="text/css">
    legend { display: block; width:100px; border-bottom:0px; font-family: "Microsoft YaHei","Helvetica Neue";}
    legend a{ color:#666;} legend a:hover{ text-decoration:none;}
    .layui-table{ font-family: "Microsoft YaHei","Helvetica Neue";}
</style>
<div class="x-body">
    <blockquote class="layui-elem-quote">
        欢迎使用小区物业管理系统！<span class="f-14">v1.0</span>
    </blockquote>
    <div class="row">
        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-blue"> <i class=" iconfont icon-dashaxiaoqudizhi01"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总栋数"><i class="iconfont " data-icon=""></i>
                        <h1>${buildingVos.size()}</h1>
                    </a>

                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总栋数"> <i class="iconfont " data-icon=""></i><span>总栋数</span></a>

                </div>
            </section>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-commred"> <i class="iconfont icon-lvhuaxiaoqu"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总户数"> <i class="iconfont " data-icon=""></i>
                        <h1>${villages.size()}</h1>
                    </a>

                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总户数"> <i class="iconfont " data-icon=""></i><span>小区数</span></a>

                </div>
            </section>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-dark-green"> <i class="iconfont icon-yezhuxian"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总人数"> <i class="iconfont " data-icon=""></i>
                        <h1>${persons.size()}</h1>
                    </a>
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="总人数"> <i class="iconfont " data-icon=""></i><span>总人数</span></a>
                </div>
            </section>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-yellow-green"> <i class="layui-icon" style="top: 3px;">&#xe613;</i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="租户数量"> <i class="iconfont " data-icon=""></i>
                        <h1>${housings.size()}</h1>
                    </a>
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="租户数量"> <i class="iconfont " data-icon=""></i><span>租户数量</span></a>
                </div>
            </section>
        </div>
    </div>
        <div class="col-sm-4">
            <section class="panel">
                <div class="panel-heading">最新活动</div>
                <div class="panel-body">

                        <c:forEach items="${activityVos}" var="ac" varStatus="status">
                            <ul class="list-group clear-list m-t">
                            <li class="list-group-item fist-item"> <span class="float-right">  <fmt:formatDate value="${ac.startDate}" pattern="yyyy-MM-dd "/> </span> <span class="label label-success">${status.index + 1}</span>${ac.title}</li>
                            </ul>
                        </c:forEach>

                </div>
            </section>
        </div>
        <div class="col-sm-4">
            <section class="panel">
                <div class="panel-heading">最新保修</div>
                <div class="panel-body">
                    <c:forEach items="${repairVos}" var="re" varStatus="status">
                    <ul class="list-group clear-list m-t">
                        <li class="list-group-item"> <span class="float-right"><b>
                            <c:if test="${re.state}"> <span style="color: #2aabd2">已受理</span></c:if>
                            <c:if test="${!re.state}"><span style="color: red">待受理</span> </c:if>
                        </b></span> <span class="label label-danger">${status.index + 1}</span> ${re.name} </li>
                    </ul>
                    </c:forEach>
                </div>
            </section>
        </div>
        <div class="col-sm-4">
            <section class="panel">
                <div class="panel-heading">车位信息</div>
                <div class="panel-body">
                    <c:forEach items="${parkings}" var="pa" varStatus="status">
                        <ul class="list-group clear-list m-t">
                            <li class="list-group-item"> <span class="float-right"><b>
                            <c:if test="${pa.state}"> <span style="color: #2aabd2">空闲中</span></c:if>
                            <c:if test="${!pa.state}"><span style="color: red">使用中</span> </c:if>
                        </b></span> <span class="label label-danger">${status.index + 1}</span> ${pa.parkingName} </li>
                        </ul>
                    </c:forEach>

                </div>
            </section>

        </div>

    </div>



    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据

        let date = '2020-03-025';
        option = {
            tooltip: {
                trigger: 'axis',
                formatter(params){
                    return `<div>${date} ${params[0].axisValue}<br/>${params[0].seriesName}：${params[0].value}<br/>${params[1].seriesName}：${params[1].value}%</div>`
                }
            },


            xAxis: {
                type: 'category',
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                axisLine: {
                    lineStyle: {
                        color: "#23b7e5",
                    }
                },
                axisLabel:{
                    color:'#23b7e5',
                    fontWeight:'bold'
                },
                axisTick:{
                    show:false,
                },
                axisPointer:{
                    lineStyle:{
                        color:'#D11F1F'
                    }
                },
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#23b7e5',
                        width:2
                    }
                },
                axisTick:{
                    show:false,
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#23b7e5",
                    },
                },
                axisLabel:{
                    formatter: '{value}%',
                    fontWeight:'bold'
                },
                splitArea: {
                    show: false
                },
            },
                hoverAnimation:false,
                smooth:true,

        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
<div class="layui-footer footer footer-demo" style="background-color: white">
    <div>
        <p>
            <a href="/">
                Copyright ©2017 17sucai.com All Rights Reserved.
            </a>
        </p>
    </div>
</div>

</body>
</html>